<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
      <div id="app">
        <!-- v-text 通过指令渲染文本  表达式解析出来的是普通文本  -->
        <div >
            {{msg}}
        </div>
        <div v-text="msg">
          
        </div>
        <!-- v-html将其作为html代码解析，注：编程时尽量不要是v-html,不安全  -->
        <div v-html="eleS"></div>
        <!-- v-once
        v-once实现了一次性插入，当msg的值发生改变，它就不会再改变，可以会影响其他节点的变
        化 -->
        <div v-once > 
            {{myhobby}}
        </div>
        <button @click="change">改变</button>
      </div>
      <script src="./vue.js"></script>
      <script>
        new Vue({
          el:"#app",
          data(){
            return {
              myhobby:"越野",
              msg:"今天星期一，马上放假了",
              eleS:"<h1> <img src='https://img0.baidu.com/it/u=1881231434,1387519826&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=820' /></h1>",
              
            }
          },
          methods: {
            change(){
              this.myhobby="露营"
            }
          },
        })
      </script>
   
</body>
</html>